<template>
    <div>
        <div class="header">
            <router-link to="/MyIndex" class="shopmain">商场首页</router-link>
            <el-input
                    placeholder="搜索内容/用户"
                    prefix-icon="el-icon-search"
                    v-model="input">
            </el-input>
            <router-link to="/SocialMain/Socialupload"><el-button type="danger"><i class="el-icon-s-promotion "></i>发布</el-button></router-link>
            <el-avatar  :src="headimg"></el-avatar>
        </div>
            <div class="aside">
                <el-row class="tac" >
                    <el-col>
                        <el-menu
                                class="el-menu-vertical-demo"
                                active-text-color="#FFFFFF"
                                router
                                :default-active="active"
                                 >
                            <el-menu-item :index="active">
                                <i class="el-icon-camera"></i>
                                <span>推荐</span>
                            </el-menu-item>
                            <el-menu-item index='/SocialMain/IndividualSocialShow'>
                                <i class="el-icon-s-check"></i>
                                <span slot="title">我的主页</span>
                            </el-menu-item>
                            <el-menu-item index="/SocialMain/CollectionSocialShow">
                                <i class="el-icon-star-off"></i>
                                <span slot="title">我的收藏</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>
            </div>
            <div class="main">
               <router-view></router-view>
            </div>
        </div>
</template>

<script>
    export default {
        data() {
            return {
                input: '',
                active:'/SocialMain/SocialShow',
                user:{
                    userid:'',
                    userimg:""
                },
            }
        },
        created(){
          if(window.sessionStorage.getItem("user")!=null){
              let json=window.sessionStorage.getItem("user");
                let user=JSON.parse(json);
              this.user.userid=user.uUserid;
              this.user.userimg=user.uImgpath;
          }
        },
        computed:{
            headimg:function () {
                if(this.user.userimg==""){
                    return this.user.userimg="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
                }else{
                    return this.$store.state.beginUrl+this.user.userimg
                }
            }
        }
    }
</script>

<style scoped>
    a{
        text-decoration: none;
        cursor: pointer;
        outline: none;
    }
    .header{
        height: 56px;
        width: 100%;
        margin: 0px auto;
        background: white;
        position: fixed;
        top: 0px;
        left: 0px;
        border-bottom: 1px solid #f0f0f0;
        z-index: 20;
    }
    .shopmain{
        height: 40px;
        padding: 0 10px;
        margin-top: 7px;
        line-height: 40px;
        font-size: 16px;
        color: #555555;
        border-radius: 4px;
        margin-left: 40px !important;
        float: left;
    }
    .shopmain:hover{
        background: #EDEDEF;
    }
    .el-input{
        width: 260px;
        margin-top: 2px;
        margin-right: 165px;
        border-radius: 2px;
        float: right;
        padding: 6px 9px;
        font-size: 12px;
    }
    .el-button{
        float: right;
        margin-right: -362px;
        margin-top: 7px;
        display: inline-block;
        background-color: #ff6699;
        cursor: pointer;
    }
    .el-button:hover{
        opacity: .8;
        color: #fff;
    }
    .el-avatar{
        cursor: pointer;
        position: relative;
        float: right;
        margin-left: 10px;
        margin-right: -420px;
        margin-top: 6px;
    }
    .aside {
        background: white;
        height: 100%;
        left: 0px;
        top: 57px;
        float: left;
        position: fixed;
     }
    .el-menu-item.is-active{
        background: rgb(255, 102, 153);;
    }
    .main {
        margin: 57px 0px 0px 117px;
        position: relative;
        background: #EDEDEF;
    }
</style>